<td-layout-nav color="primary">
  <div td-toolbar-content layout="row" layout-align="start center" flex>
    <!-- <span hide-gt-xs class="tc-blue-500 md-subhead">Landing</span>
      <span hide-xs class="tc-blue-500 md-subhead">Landing Page Template</span> -->
    <!-- <span class="tc-white md-subhead text-upper">Posts</span> -->
    <button md-icon-button class="tc-white" [routerLink]="['/posts']">
      <md-icon>clear</md-icon>
    </button>
    <span flex></span>
    <span class="tc-white md-subhead text-upper">new post</span>
    <span flex></span>
  </div>

  <section class="bgc-blue-grey-50" style="width:100%;height:100%;">
    <div flex class="pad" tdMediaToggle="gt-xs" [mediaClasses]="['pad-xl']">
      <md-card flex>
        <md-card-header>
          <!-- <div md-card-avatar class="example-header-image"></div> -->
          <md-card-title class="text-upper">{{'new-post'}}</md-card-title>
          <md-card-subtitle> <small>all fields marked with star are required.</small> </md-card-subtitle>
        </md-card-header>
        <md-card-content>
          <app-post-form [post]="post" (onSaved)="onPostSaved($event)"></app-post-form>
        </md-card-content>
        <md-card-footer>
          <!-- back to <a [routerLink]="['','posts']">{{'post-list'}}</a> -->
        </md-card-footer>
      </md-card>
    </div>
  </section>
</td-layout-nav>
